<template>
<view class="page">
	<!-- <u-toast ref="uToast"></u-toast>
	<input type="text" v-model="form.username">
	<input type="text" v-model="form.password">
	{{this.$store.state}}
	<button @click="exit">登录</button> -->
	<u--form
			labelPosition="left"
			:model="form"
			:rules="form"
			ref="form1"
	>
		<u-form-item
			label="账号"
			prop="username"
			borderBottom
		>
			<u--input focus11
				v-model="form.username"
				placeholder="请输入账号"
				border="none"
			></u--input>
		</u-form-item>
		<u-form-item
			label="密码"
			prop="password"
			borderBottom
		>
			<u--input
				v-model="form.password"
				border="none"
				placeholder="请输入密码"
			></u--input>
		</u-form-item>
		<u-button type="primary" text="登录" @click="login"></u-button>
	</u--form>
</view>
</template>

<script>
	import {loginBack} from "@/utils/utils.js"
	export default {
		data() {
			return {
				form:{
					username:"root",
					password:"123",
					wxUsername:"next",
					phone:"188****0148"
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					'password': {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			exit(){
				loginBack()
			},
			login(){
				this.$refs.form1.validate().then(res => {
					this.loginForm()
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('登录失败')
				})
			},
			loginForm(){
				const form=this.form
				uni.showLoading({
					title:"登录中"
				})
				setTimeout(()=>{
					if(form.username==="root"&&form.password==="123"){
						this.$store.commit("login",this.form)
						loginBack()
						uni.$u.toast('已登录')
					}else{
						uni.$u.toast('登录失败')
					}
				},1100)
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// const index=pageArr.indexOf("pages")
			// console.log("pageArr[index+1]: ",pageArr[index+1]);
			this.$refs.form1.setRules(this.rules)
		},
	}
</script>

<style scoped>
.page{
	padding: 20% 1em 0;
}
</style>
